<template>
  <!-- <van-dialog v-model:show="showPhoneDialog" title="领奖" :before-close="onBeforeClosePhoneDialog" @confirm="onConfirm">
    <van-form ref="formRef" style="margin-top: 20px;">
      <van-cell-group inset>
        <van-field v-model="form.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码" :readonly="true"
          :rules="[{ required: true, message: '请输入手机号码' }]" />
        <van-field name="code" v-model="form.code" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
            <van-button size="small" type="primary" :disabled="!sendCodeAble" @click="sendCode">
              <van-count-down ref="codeCountDownRef" :time="sendCodeTime" @finish="sendCodeAble = true">
                <template #default="timeData">
                  <span style="color: #fff;" v-if="sendCodeAble">获取验证码</span>
                  <span style="color: red;" v-if="!sendCodeAble">{{ timeData.seconds }}s</span>
                </template>
              </van-count-down>
              <span></span>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
  </van-dialog> -->
  <div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showDialog, showFailToast } from 'vant';
import 'vant/es/dialog/style';
import { submitSms4Awards, sendSms4Awards, queryMemberInfo, submitAwards } from '@/api/task';

const route = useRoute();
const router = useRouter();

const u_openid = route.query.u_openid;
console.log(u_openid, 'u_openid');

const showPhoneDialog = ref(true);
const formRef = ref();
const form: any = ref({});
const taskId = localStorage.getItem('taskId');
const taskUserId = localStorage.getItem('taskUserId');
const sendCodeAble = ref(true);
const sendCodeTime = ref(60000);
const codeCountDownRef = ref();

onMounted(() => {
  // queryMemberInfo({ openId: localStorage.getItem('token') }).then((res: any) => {
  //   if (res.code == 200) {
  //     form.value.mobile = res.data.phone;
  //   } else {
  //     showFailToast("获取信息失败")
  //   }
  // })
  getAwardReq()
})

function sendCode() {
  formRef.value.validate(['mobile']).then(() => {

    sendSms4Awards({
      mobile: form.value.mobile,
      mobileCode: 8888,
      taskId: taskId,
      taskUserId: taskUserId
    }).then((res) => {
      console.log(res, 'res');
      if (res.code == 200) {
        // todo 倒计时 不可点击
        sendCodeAble.value = false;
        codeCountDownRef.value.reset();
      }
    })

  })
}

function onConfirm() {

  // 提交手机号码和验证码
  console.log(form.value, 'form');

  formRef.value.validate().then(() => {
    submitSms4Awards({
      mobile: form.value.mobile,
      code: form.value.code,
      taskId: taskId,
      taskUserId: taskUserId,
      openId: u_openid,
    }).then((res: any) => {
      console.log(res, 'res');
      if (res.code == 200) {
        showDialog({
          title: '',
          message: '领奖成功',
          confirmButtonText: '确定'
        }).then(() => {
          router.replace(`/index/${taskId}`)
        });
      }
    })
  })
}


//直接请求领奖
function getAwardReq() {
  submitAwards({
    taskId: taskId,
    taskUserId: taskUserId,
    openId: u_openid,
  }).then((res: any) => {
      console.log(res, 'res');
      if (res.code == 200) {
        showDialog({
          title: '',
          message: '领奖成功',
          confirmButtonText: '确定'
        }).then(() => {
          router.replace(`/index/${taskId}`)
        });
      }else{
        showDialog({
          title: '',
          message: '发生错误，返回首页',
          confirmButtonText: '确定'
        }).then(() => {
          router.replace(`/index/${taskId}`)
        });
      }
    })
}

function onBeforeClosePhoneDialog(action: string) {
  // 点击了确定按钮
  if (action === "confirm") {
    return false;
  }
}
</script>